// 如何才能让一个对象变成响应式数据呢？
// 1. 副作用函数执行时，触发对象的读取操作（并考虑把当前副作用函数存到一个桶中）
// 2. 当修改对象的属性时，触发对象的设置操作（并把桶中的副作用函数取出执行）

// vue3中使用proxy来拦截对象属性的读取和设置操作

// 基本实现如下：
let bucket = new Set();

let obj = {
  text: "hello 11",
};
let objProxy = new Proxy(obj, {
  get(target, key) {
    bucket.add(activeEffect);
    return target[key];
  },
  set(target, key, val) {
    target[key] = val;
    bucket.forEach((fn) => fn());
    return true;
  },
});
let activeEffect = null;
const effectFn = (fn) => {
  activeEffect = fn;
  fn();
};
effectFn(() => {
  //   document.body.innerText = objProxy.text;
  console.log("objProxy.text=", objProxy.text);
});

// 1s之后修改objProxy.text的值
// setTimeout(() => {
//   objProxy.text = "hello 22";
// }, 1000);

// 理解响应式数据的基本实现和工作原理

// 如上副作用函数内部读取了objProxy.text字段，于是副作用函数与objProxy.text字段之间建立了响应式联系。
// 问题如下【如果1秒后在objProxy对象上设置一个不存在的字段noExist，在副作用函数内并没有读取该字段，所以他们之间没有建立响应式联系，因此修改noExist的值 不应该触发副作用函数执行】
// 1s之后修改objProxy.noExist的值
setTimeout(() => {
  objProxy.noExist = "hello 22";
}, 1000);
// 打印了两遍副作用函数中的console（即副作用函数还是被触发了，这是不正确的）
// objProxy.text= hello 11
// objProxy.text= hello 11

// 解决方案看4.3设计一个完善的响应式系统
